<template>
  <div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">小说分类</a></el-breadcrumb-item>
  </el-breadcrumb>

  <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 200px">
    <el-tab-pane label="男生" name="first">
      <span>分类</span>
      <div>
        <el-tabs @tab-click="handleClick">
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        </el-tabs>
      </div>
    </el-tab-pane>
    <el-tab-pane label="女生" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="出版" name="third">角色管理</el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
export default {
  name: "sort",
  data() {
    return {
      activeName: 'second'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

  }
}
</script>

<style scoped>

</style>
